gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
}

//////////////////////////////////////////////////
// 设定界面显示相关操作
//////////////////////////////////////////////////

function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落子了!";
    } else {
        screen.innerHTML = "轮到对方落子了!";
    }
}

//////////////////////////////////////////////////
// 初始化 websocket
//////////////////////////////////////////////////
// TODO
var websocket = new WebSocket("ws://127.0.0.1:8080/game");
websocket.onopen = function () {
    console.log("建立连接");
}
websocket.onclose = function () {
    console.log("连接关闭");
}
websocket.onerror = function () {
    console.log("连接错误");
}
websocket.onmessage = function (e) {
    var relust=JSON.parse(e.data);
    if(relust.message!='gameReady') {
        console.log("加载游戏失败");
        location.href='/game_hall.html';
    }
    if(!relust.ok) {
        console.log("发生错误");
    }
    if(relust.message=='noshuang') {
        alert("禁止多开");
        location.href='/login.html';
    }
    gameInfo.roomId=relust.roomid;
    gameInfo.thisUserId=relust.userid1;
    gameInfo.thatUserId=relust.userid2;
    gameInfo.isWhite=(relust.whiteUser==gameInfo.thisUserId);
    console.log(gameInfo.thisUserId);
    initGame();
    console.log("加载棋盘完成");
    setScreenText(gameInfo.isWhite);
}

//////////////////////////////////////////////////
// 初始化一局游戏
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    console.log(chess);
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图片
    let logo = new Image();
    logo.src = "image/wl.jpg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
        for (let i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 430);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }

    // 绘制一个棋子, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }

    chess.onclick = function (e) {
        if (over) {
            return;
        }
        if (!me) {
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是行
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] == 0) {
            // TODO 发送坐标给服务器, 服务器要返回结果

            send(row,col);
            // oneStep(col, row, gameInfo.isWhite);
            // chessBoard[row][col] = 1;
        }

    }
    function send(row,col) {
        var relust = {
            message:"putChess",
            row:row,
            col:col,
            userid:gameInfo.thisUserId
        }
        console.log("发送落子请求成功");
        websocket.send(JSON.stringify(relust));
    }
    websocket.onmessage=function(e) {
        var relust=JSON.parse(e.data);
        if(relust.message!='putChess') {
            console.log("格式错误");
            return;
            
        }
        // 判断当前响应是对方的还是自己的
        if(relust.userid==gameInfo.thisUserId) {
            oneStep(relust.col,relust.row,gameInfo.isWhite);
        }else if(relust.userid==gameInfo.thatUserId) {
            oneStep(relust.col,relust.row,!gameInfo.isWhite);
        }else {
            console.log("出现异常");
        }
        
        chessBoard[relust.row][relust.col]=1;
        me=!me;
        setScreenText(me);
        var screenDiv=document.querySelector('#screen');
        if(relust.winner==gameInfo.thisUserId) {
            
            console.log("胜利");
            screenDiv.innerHTML='胜利';
            var add=document.createElement('button');
            add.onclick=function() {
                location.replace("/game_hall.html");
            }
            add.innerHTML="回到大厅";
            var contter=document.querySelector('.contter');
            contter.appendChild(add);
            // alert("胜利");
            // location.href="/game_hall.html";
        }else if(relust.winner==gameInfo.thatUserId) {
            
            screenDiv.innerHTML='失败';
            var add=document.createElement('button');
            add.onclick=function() {
                location.replace("/game_hall.html");
            }
            add.innerHTML="回到大厅";
            var contter=document.querySelector('.contter');
            contter.appendChild(add);
            // alert("失败");
            // location.href="/game_hall.html";
        }
        
    }
}


